/**
 * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */

import { useSelector } from 'react-redux';
import { memo, useState,useEffect } from 'react';
import { useDeviceState, useLeave } from '@/lib/useCommon';
import { RootState } from '@/store';
import { Link,useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux';
import style from './index.module.less';
import LeaveRoomSVG from '@/assets/AiImgs/huangup.png';
import RtcClient from '@/lib/RtcClient';
import { Overlay,Loading } from 'react-vant';
import { callFinished,setAutoHangup } from '@/store/slices/room';
import TimeToast from '@/components/Header/timeToast';
function Hangup(props: React.HTMLAttributes<HTMLDivElement>) {
  const dispatch = useDispatch();
  const { className, ...rest } = props;
  const room = useSelector((state: RootState) => state.room);

  const navigate = useNavigate();
  const leaveRoom = useLeave();
  const[visible,setVisible]=useState(false)
  const [showTip,setShowTip]=useState(false)
  const [durationCount,setDurationCount]=useState(0)
  const onLeaveRoom=async()=>{
    dispatch(callFinished({ data:true }));
    let prcid = RtcClient.getPracticeId()
    setVisible(true)
    let res =await leaveRoom()
    console.log(res,'触发挂断电话')
    if(res.code===2000){
      setVisible(false)
      dispatch(setAutoHangup({data:false}))
      navigate(`/TrainingEnd?prcid=${prcid}`,{ replace: false })
    }
  }

  useEffect(()=>{
    if(room.autoHangup){
      // onLeaveRoom()

      return () => {
        onLeaveRoom()
      };
    }
  },[room.autoHangup])
  
  return (<div className='text-right'>
    <img src={LeaveRoomSVG} onClick={onLeaveRoom} className={`${style.btn} h-[60px]`} alt="leave" />
    <Overlay visible={visible}
        style={{
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          {/* <Loading type="spinner" >生成中...</Loading> */}
      </Overlay>
      {showTip&&<TimeToast/>}
  </div>
   
  );
}
export default memo(Hangup);
